<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        {{msg}}
    </div>

    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script> 
        const Vue = {
            createApp(options) {
                return{
                    mount(selector) {
                        const parent = document.querySelector(selector)
                        if(!options.render) {
                            options.render = this.compile(parent.innerHTML)
                            console.log(options.render)
                        }
                        if(options.setup) {
                            this.setupSate = options.setup()
                        }
                        if(options.data) {
                            this.data = options.data()
                        }
                        const proxy = new Proxy(this, {
                            get(target, key) {
                                //先setup，再data
                                if(target.setupSate && key in target.setupSate)
                                {
                                    console.log('优先setup')
                                    return  target.setupSate[key]
                                }
                                else return target.data[key]
                            },
                            set() {

                            }
                        })
                        // console.log('此时'+proxy.msg)
                        const el = options.render.call(proxy)
                        console.log(el)
                        parent.innerHTML = ''
                        parent.appendChild(el)
                    },
                    compile(template) {
                        return function render() {
                            const h3 = document.createElement('h3')
                            h3.textContent = this.msg
                            return h3
                        }
                    }
                }
            }
            ,createRender({
                querySelector,
                insert
            }){
                return{
                    
                }
            }
        }
    </script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    msg:'hello vue'
                }
            },
            setup() {
                return {
                    msg:'hello vue3'
                }
            }
        })
        app.mount('#app')
    </script>
</body>
</html>